import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
// 消息输入组件
const MessageInput: React.FC<{ onSendMessage: (message: string) => void }> = ({
  onSendMessage,
}) => {
  const [input, setInput] = useState("");
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSendMessage(input);
    setInput("");
  };
  return (
    <form onSubmit={handleSubmit} className="flex space-x-2">
      <Input
        value={input}
        onChange={(e: { target: { value: React.SetStateAction<string> } }) =>
          setInput(e.target.value)
        }
        placeholder="输入新消息"
      />
      <Button type="submit">发送</Button>
    </form>
  );
};

// 消息显示组件
const MessageDisplay: React.FC<{ message: string }> = ({ message }) => (
  <div className="mt-4 p-4 bg-gray-100 rounded">
    <h3 className="font-bold">最新消息：</h3>
    <p>{message || "尚无消息"}</p>
  </div>
);

// 消息中心组件
const MessageCenter: React.FC = () => {
  const [currentMessage, setCurrentMessage] = useState("");
  return (
    <div className="p-4 max-w-md mx-auto">
      <h2 className="text-2xl font-bold mb-4">React消息中心</h2>
      <MessageInput onSendMessage={setCurrentMessage} />
      <MessageDisplay message={currentMessage} />
    </div>
  );
};
export default MessageCenter;
